<template>
	<view>
		<nav-box :title="type == 1 ? '培训任务' : '测评任务'"></nav-box>
		<block v-for="item in list" :key="item.id">
			<navigator :url="`../appointDetail/appointDetail?title=${item.title}&type=${type}`" hover-class="none">
				<view class="item-box">
					<view class="left-box">
						<text>{{item.title}}</text>
						<text>{{item.date}}</text>
					</view>
					<image src="../../static/images/forward.png" mode=""></image>
				</view>
			</navigator>
		</block>
	</view>
</template>

<script>
	// type 1 培训任务  2 测评任务
	export default {
		data() {
			return {
				type: '',
				list: []
			};
		},
		onLoad(options) {
			this.type = options.type;
			// 走接口获取任务列表替换测试数据
			if (this.type == 1) {
				this.list = [{
						id: 1,
						title: '培训任务1',
						date: '2021/01/04'
					},
					{
						id: 2,
						title: '培训任务2',
						date: '2021/01/04'
					}
				];
			} else {
				this.list = [{
						id: 1,
						title: '测评任务1',
						date: '2021/01/04'
					},
					{
						id: 2,
						title: '测评任务2',
						date: '2021/01/04'
					}
				];
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;

		.item-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2upx solid #f1f1f1;
			padding: 30upx 0;

			.left-box {
				padding-left: 30upx;

				text {
					display: block;
					font-size: 32upx;
					color: #4B4B4B;

					&:last-child {
						font-size: 28upx;
						color: #7E7E7E;
					}

					&:not(:last-child) {
						margin-bottom: 16upx;
					}
				}
			}

			image {
				width: 40upx;
				height: 40upx;
				padding-right: 30upx;
			}
		}
	}
</style>
